<template>
  <view class="video-item-view">
    <!-- <video
      :id="'videoPlayer_' + videoId"
      src="/static/video/3.mp4"
      controls
      show-center-play-btn="true"
      :autoplay="false"
    ></video> -->

    <video
      class="video-item"
      :id="'videoPlayer_' + videoId"
      :src="src"
      :controls="false"
      :autoplay="autoplay || false"
      show-center-play-btn="false"
      show-loading="false"
      enable-progress-gesture="false"
      show-mute-btn="false"
      show-fullscreen-btn="false"
      show-play-btn="false"
      object-fit="contain"
      poster=""
      @timeupdate="onTimeUpdate"
      @click="togglePlay"
    ></video>

    <view class="play-control" @click.stop="togglePlay">
      <view class="play-btn" v-if="!isPlaying"></view>
      <view class="pause-btn" v-if="isPlaying" style="display: none"></view>
    </view>

    <view class="progress-info" v-if="showProgress">
      {{ currentTime }} / {{ duration }}
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      src: {
        type: String,
        required: true,
      },
      videoId: {
        type: [String, Number],
        required: true,
      },
      autoplay: {
        type: Boolean,
        default: false,
      },
    },
    computed: {},
    watch: {
      isPlaying(newVal) {
        if (newVal) {
          // 播放时确保隐藏cover组件
          this.hideVideoCover();
        }
      },
    },
    mounted() {
      if (this.autoplay) {
        this.isPlaying = true;
      }
      this.hideVideoCover();
      this.initVideoContext();
    },
    data() {
      return {
        isPlaying: false,
        currentTime: 0,
        duration: 0,
        showProgress: false,
        showInitialOverlay: true,
        videoContext: null,
        autoplayAllowed: false, // 自动播放是否被允许
      };
    },
    methods: {
      initVideoContext() {
        this.videoContext = uni.createVideoContext(
          "videoPlayer_" + this.videoId,
          this
        );
        if (!this.videoContext) {
          console.error("无法获取视频上下文");
          setTimeout(() => this.initVideoContext(), 300);
        }
      },
      onVideoReady() {
        // this.$emit("ready");
      },
      hideVideoCover() {
        // #ifdef H5
        const timer = setInterval(() => {
          const videoNode = document.getElementById(
            "videoPlayer_" + this.videoId
          );
          if (videoNode) {
            const cover = videoNode.querySelector(".uni-video-cover");
            if (cover) {
              cover.style.display = "none";
              clearInterval(timer);
            }
          }
        }, 100);
        // #endif
        // #ifdef MP-WEIXIN
        // #endif
      },
      togglePlay() {
        if (this.isPlaying) {
          this.pause();
        } else {
          this.play();
        }
        // this.isPlaying = !this.isPlaying;
      },
      play() {
        // 尝试播放
        this.videoContext.play();
        this.isPlaying = true;
        return true;
      },
      pause() {
        this.videoContext.pause();
        this.isPlaying = false;
      },
      onTimeUpdate(e) {
        this.currentTime = Math.floor(e.detail.currentTime);
        this.duration = Math.floor(e.detail.duration);
      },
      touchStart(e) {},
      touchMove(e) {},
    },
  };
</script>

<style>
  .uni-video-cover {
    display: none !important;
  }

  .video-item-view {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .video-item-view .video-item {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
  }

  .play-control {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    pointer-events: auto;
    background-color: transparent;
  }

  .play-btn {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    position: relative;
  }

  .play-btn::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 18px;
    border-width: 15px 0 15px 25px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
  }

  .pause-btn {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    position: relative;
  }

  .pause-btn::before,
  .pause-btn::after {
    content: "";
    position: absolute;
    top: 18px;
    width: 10px;
    height: 24px;
    background-color: #333;
  }

  .pause-btn::before {
    left: 18px;
  }

  .pause-btn::after {
    right: 18px;
  }

  .progress-info {
    position: absolute;
    bottom: 80px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 10;
  }
</style>
